import { DateCell, SelectCell, TableOperationCard, EditcellTable, Sorter, DateToMoment,Filter } from 'dw-mx-table';
import { Code } from 'dw-mx-extend';
import React, { useEffect, useState } from 'react';
import { MinusOutlined, SearchOutlined } from 'dw-mx-icons';
import { Button, Modal, Space } from 'dw-mx';
import Lov from '@/pages/table/Lov';
import FilterChild from './FilterDemo';

export default function TableOperationCardDemo() {
 
    const columnsFormat = ['string', 'number', 'date', 'select'];
    const addressSelectList = Code.STRINGCODE('1:南京,2:南通,3:北京,4:济南');

    const filterColumnsData = [
        {
            title: 'OrderByASCLL',
            dataIndex: 'name',
            sorter: Sorter.sortStringByASCLL('name'),
            componentType: {
                type: 'Input',
                props: { placeholder: '请输入' },
            },
            sortDirections: ['descend'],
            ...Filter.stringFilter('name'),
        },
        {
            title: 'OrderByNumber',
            dataIndex: 'age',
            defaultSortOrder: 'descend',
            sorter: Sorter.sortNumber('age'),
            componentType: {
                type: 'Input',
                props: { placeholder: '请输入' },
            },
        },
        {
            title: 'OrderByDate',
            dataIndex: 'date',
            componentType: {
                type: 'Input',
                props: { placeholder: '请输入' },
            },
            sorter: Sorter.sortDate('date', 'YYYY-MM-DD'),
            sortDirections: ['descend', 'ascend'],
            ...Filter.dateFilter('date', 'YYYY-MM-DD'),
        },
        {
            title: 'selectFilter',
            dataIndex: 'select',
            componentType: {
                type: 'Input',
                props: { placeholder: '请输入' },
            },
            render: (value, record, index) => {
                return <SelectCell value={value} align={'left'} options={addressSelectList}></SelectCell>;
            },
            ...Filter.selectFilter('select', addressSelectList),
        },
    ];

    const tableData = [
        {
            key: '1',
            name: 'Jim',
            age: 32,
            address: 'New York No. 1 Lake Park',
            date: '2020-08-14',
            // chinese: '济南',
            select: '4',
        },
        {
            key: '2',
            name: 'Gim',
            age: 40,
            address: 'London No. 1 Lake Park',
            date: '2020-08-15',
            // chinese: '北京',
            select: '3',
        },
        {
            key: '3',
            name: 'Mary',
            age: 31,
            address: 'Sidney No. 1 Lake Park',
            date: '2019-08-14',
            // chinese: '南京',
            select: '1',
        },
        {
            key: '4',
            name: 'Mark',
            age: 32,
            address: 'London No. 2 Lake Park',
            date: '2000-08-14',
            // chinese: '南通',
            select: '2',
        },
        {
            key: '5',
            name: 'Mark',
            age: 32,
            address: 'London No. 2 Lake Park',
            date: '2000-08-14',
            // chinese: '南通',
            select: '2',
        },
        {
            key: '6',
            name: 'Mark',
            age: 32,
            address: 'London No. 2 Lake Park',
            date: '2000-08-14',
            // chinese: '南通',
            select: '2',
        },
        {
            key: '7',
            name: 'Mark',
            age: -234,
            address: 'London No. 2 Lake Park',
            date: '2000-08-14',
            // chinese: '南通',
            select: '2',
        },
        {
            key: '8',
            name: 'Mark',
            age: 32,
            address: 'London No. 2 Lake Park',
            date: '2000-08-14',
            // chinese: '南通',
            select: '2',
        },
        {
            key: '9',
            name: 'Mark',
            age: 32,
            address: 'London No. 2 Lake Park',
            date: '2000-08-14',
            // chinese: '南通',
            select: '2',
        },
        {
            key: '10',
            name: 'Mark',
            age: 32,
            address: 'London No. 2 Lake Park',
            date: '2000-08-14',
            // chinese: '南通',
            select: '2',
        },
        {
            key: '11',
            name: 'Mark',
            age: 32,
            address: 'London No. 2 Lake Park',
            date: '2000-08-14',
            // chinese: '南通',
            select: '2',
        },
    ];


    const [selectedRowKeys, setSelectedRowKeys] = useState([]);

    const [allColumnsData, updateAllColumnsData] = useState(filterColumnsData);


    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
            setSelectedRowKeys(selectedRowKeys);
        },
    };

    useEffect(() => {
        updateAllColumnsData(allColumnsData);
    }, [allColumnsData]);

    //开启过滤弹窗
    const [filterData, updateFilterData] = useState(tableData);
    const [modal, updateModal] = useState({
        open: false,
        props: {},
    });

    const filterColumns = async () => {
        updateModal({
            open: true,
            props: {
                columnsFormat,
                filterColumnsData,
                filterData,
                addressSelectList,
            },
        });
    };
    const resetTable = async () => {
        updateFilterData(tableData);
    };
    const closeModal = async (ret) => {
        updateModal({
            open: false,
            props: {},
        });
    };
    const onFilterDataChanged = async (value) => {
        updateModal({
            open: false,
            props: {},
        });
        updateFilterData(value.slice());
    };
    return (
        <div>
            <h3 style={{ padding: '5px' }}>过滤操作</h3>
            <EditcellTable rowSelection={{ ...rowSelection }} dataSource={filterData} columns={filterColumnsData}></EditcellTable>
            <Space>
                <Button onClick={filterColumns}>点击开始筛选</Button>
                <Button onClick={resetTable}>点击重置table中的数据</Button>
            </Space>
            {modal.open && (
                <Modal maskClosable={false} footer={null} title="人员信息" width={'70%'} visible={true} onCancel={() => closeModal('cancel')}>
                    <FilterChild {...modal.props} onFilterDataChanged={onFilterDataChanged}></FilterChild>
                </Modal>
            )}
        </div>
    );
}
